
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./cesium/Cesium1.98/Widgets/widgets.css" />
    <script type="text/javascript" src="./cesium/Cesium1.98/Cesium.js"></script>
</head>

<body style="
      margin: 0;
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute; top: 0;
    ">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken =
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
        const viewer = new Cesium.Viewer("map", {});
        viewer.scene.debugShowFramesPerSecond = true;
        viewer.scene.globe.depthTestAgainstTerrain = true;

        // 定义自定义材质
        var material = new Cesium.Material({
            fabric: {
                type: 'Custom',
                uniforms: {
                    color: new Cesium.Color(1.0, 0.0, 0.0, 0.7) // 红色
                },
                source: `
                    uniform vec4 color;
                    czm_material czm_getMaterial(czm_materialInput materialInput) {
                        czm_material material = czm_getDefaultMaterial(materialInput);
                        material.diffuse = color.rgb;
                        material.alpha = color.a;
                        return material;
                    }
                `
            },
            translucent: function (feature) {
                return true;
            }
        });

        viewer.scene.globe.material = material;

    </script>
</body>

</html>